<template>
	<view>
		<view class="topbak" :style="{ height: sH +10+ 'px' }">

		</view>
		<navigator hover-class="none" class="nav-box" open-type="navigateBack">
			<u-icon name="arrow-left" color="#000000" label-color="#000000" :size="20" :label-size="18"
				label="数据统计"></u-icon>
		</navigator>
		<view class="content">
			<view class="tablist">
				<u-subsection :list="list" :current="curNow" inactiveColor="#666B75" bgColor="#F7F7F7"
					activeColor="#00091A" bold="false" @change="sectionChange"></u-subsection>
			</view>
			<view class="table_o">
				<view class="o_tj flex items-end">
					<view class="tj_one">
						收益统计
					</view>
					<view class="tj_t">
						统计时间{{start}}
					</view>
				</view>
				<view class="t_tj flex justify-between items-center">
					<view class="ttj_o f5 flex-col justify-center">
						<view class="shouyi">
							今日收益(元)
						</view>
						<view class="money">
							{{info.after_sales_statistics.today_money||0}}
						</view>
					</view>
					<view class="ttj_t f1 flex justify-center" style="color: #CCCED1;">
						|
					</view>
					<view class="ttj_h f5 flex-col justify-center">
						<view class="o flex" style="margin: 15rpx 0;">
							<view class="" style="font-size: 24rpx;color: #999CA3;">
								昨日全天
							</view>
							<view class="" style="font-size: 24rpx;color: #333A47;">
								￥{{info.after_sales_statistics.yesterday_money||0}}
							</view>
						</view>
						<view class="o flex" style="margin: 15rpx 0;">
							<view class="" style="font-size: 24rpx;color: #999CA3;">
								昨日此刻
							</view>
							<view class="" style="font-size: 24rpx;color: #333A47;">
								￥{{info.after_sales_statistics.yesterday_cs_money||0}}
							</view>
						</view>
					</view>

				</view>
				<view class="bag_money flex flex-wrap justify-start">
					<view class="m_o a flex-col justify-center items-center">
						<view class="o_e">
							{{info.after_sales_statistics.number_of_orders_received||0}}
						</view>
						<view class="o_w">
							接单数(笔)
						</view>
					</view>
					<view class="m_t a flex-col justify-center items-center">
						<view class="o_e">
							{{info.after_sales_statistics.customer_unit_price||0}}
						</view>
						<view class="o_w">
							客单价(元)
						</view>
					</view>
					<view class="m_h a flex-col justify-center items-center">
						<view class="o_e">
							{{info.after_sales_statistics.to_be_credited||0}}
						</view>
						<view class="o_w">
							待入账(元)
						</view>
					</view>
					<view class="m_h a flex-col justify-center items-center">
						<view class="o_e">
							{{info.after_sales_statistics.completed||0}}
						</view>
						<view class="o_w">
							完成订单(笔)
						</view>
					</view>
					<view class="m_h a flex-col justify-center items-center">
						<view class="o_e">
							{{info.after_sales_statistics.to_be_completed||0}}
						</view>
						<view class="o_w">
							待完成订单(笔)
						</view>
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true"
						@getIndex="getIndex" :tapLegend="false" />
				</view>
			</view>
			<!-- 扣款统计 -->
			<view class="table_o">
				<view class="o_tj flex items-end">
					<view class="tj_one">
						扣款统计
					</view>
					<view class="tj_t">
						统计时间{{start}}
					</view>
				</view>
				<view class="t_tj flex justify-between items-center">
					<view class="ttj_o f5 flex-col justify-center">
						<view class="shouyi">
							今日扣款(元)
						</view>
						<view class="money">
							{{info.revenue_statistics.todays_refund||0}}
						</view>
					</view>
					<view class="ttj_t f1 flex justify-center" style="color: #CCCED1;">
						|
					</view>
					<view class="ttj_h f5 flex-col justify-center">
						<view class="o flex" style="margin: 15rpx 0;">
							<view class="" style="font-size: 24rpx;color: #999CA3;">
								昨日全天
							</view>
							<view class="" style="font-size: 24rpx;color: #333A47;">
								￥{{info.revenue_statistics.refund_yesterday||0}}
							</view>
						</view>
						<view class="o flex" style="margin: 15rpx 0;">
							<view class="" style="font-size: 24rpx;color: #999CA3;">
								昨日此刻
							</view>
							<view class="" style="font-size: 24rpx;color: #333A47;">
								￥{{info.revenue_statistics.yesterday_at_this_moment||0}}
							</view>
						</view>
					</view>

				</view>
				<view class="bag_money flex flex-wrap justify-start">
					<view class="m_o a flex-col justify-center items-center">
						<view class="o_e">
							{{info.revenue_statistics.number_of_refunds||0}}
						</view>
						<view class="o_w">
							订单数(笔)
						</view>
					</view>
					<view class="m_t a flex-col justify-center items-center">
						<view class="o_e">
							{{info.revenue_statistics.customer_unit_price||0}}
						</view>
						<view class="o_w">
							客单价(元)
						</view>
					</view>
					<view class="m_h a flex-col justify-center items-center">
						<view class="o_e">
							{{info.revenue_statistics.Number_of_count||0}}
						</view>
						<view class="o_w">
							待扣款订单(笔)
						</view>
					</view>
					<view class="m_h a flex-col justify-center items-center">
						<view class="o_e">
							{{info.revenue_statistics.pending_refund||0}}
						</view>
						<view class="o_w">
							待扣款(元)
						</view>
					</view>
					<view class="m_h a flex-col justify-center items-center">
						<view class="o_e">
							{{info.revenue_statistics.number_of_refunds||0}}
						</view>
						<view class="o_w">
							新增扣款订单(笔)
						</view>
					</view>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData2" :ontouch="true"
						@getIndex="getIndex" :tapLegend="false" />
				</view>
			</view>
			<image src="@/static/logo.png" mode="widthFix" style="margin-top: 50rpx;bottom: 30rpx;width: 700rpx;">
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				sH: '',
				marginTopValue: 200,
				list: ['今日', '本月', '全部'],
				curNow: 0,
				info: '',
				chartData: {},
				chartData2: {},
				day: '',
				start: '',
				end: '',
				res: {
					series: [],
					categories: [],
				},
				res2: {
					series: [],
					categories: [],
				},
				//这里的 opts 是图表类型 type="line" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['line'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					tapLegend: false,
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#3377FF", "#5CE500", "#FF6401", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					fontSize: 13,
					fontColor: "#666666",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "hollow",
					touchMoveLimit: 60,
					enableScroll: true,
					canvas2d: true,
					enableMarkLine: false,
					legend: {
						show: true,
						position: "bottom",
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(254,61,61,0)",
						borderColor: "rgba(255,112,112,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					xAxis: {
						disableGrid: true,
						disabled: false,
						axisLine: true,
						axisLineColor: "#F7FAFF",
						calibration: false,
						fontColor: "#8e8e8e",
						fontSize: 13,
						lineHeight: 20,
						marginTop: 0,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "center",
						splitNumber: 5,
						gridColor: "#a6a6a6",
						gridType: "solid",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						title: "",
						titleFontSize: 13,
						titleOffsetY: 0,
						titleOffsetX: 0,
						titleFontColor: "#666666",
						format: ""
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: true,
						disableGrid: false,
						splitNumber: 5,
						gridColor: "#dbdbdb",
						padding: 10,
						showTitle: false,
						data: []
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "none",
							onShadow: true,
							animation: "vertical"
						},
						tooltip: {
							showBox: true,
							showArrow: false,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 7,
							borderColor: "#ffffff",
							borderOpacity: 0.7,
							bgColor: "#EBF2FF",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#C2D7FF",
							boxPadding: 3,
							fontSize: 13,
							lineHeight: 20,
							fontColor: "#999CA3",
							legendShow: true,
							legendShape: "circle",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#d24343",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						}
					}
				}
			};
		},
		onLoad() {
			this.getWinTop().then(res => {
				this.sH = res.statusBar;
			});
			this.sectionChange(0)

		},
		onReady() {
			// this.getServerData();
		},
		methods: {
			rider_statistics() {
				// 定义一个变量来存储请求参数
				var apiParams = {
					type: this.curNow
				};

				// 根据不同的情况设置请求参数
				if (this.curNow === 0) {
					apiParams.start = this.start;
					apiParams.end = this.end;
				} else if (this.curNow === 1) {
					apiParams.day = this.day;
					apiParams.start = this.start;
					apiParams.end = this.end;
				} else {
					apiParams.start = this.start;
					apiParams.end = this.end;
				}
				console.log(apiParams);
				// 调用API，并处理返回结果
				this.$api.rider_statistics(apiParams)
					.then(res => {
						this.info = res.data;
						console.log(this.info.after_sales_statistics.customer_unit_price);
						this.res.series = this.info.after_sales_statistics.tb.series;
						this.res.categories = this.info.after_sales_statistics.tb.categories;
						this.chartData = JSON.parse(JSON.stringify(this.res));
						this.res2.series = this.info.revenue_statistics.tb.series;
						this.res2.categories = this.info.revenue_statistics.tb.categories;
						this.chartData2 = JSON.parse(JSON.stringify(this.res2));

					});


			},
			sectionChange(index) {
				this.curNow = index;
				// 创建一个新的 Date 对象
				var today = new Date();

				// 获取年、月、日
				var year2 = today.getFullYear();
				var month2 = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份补零
				var day2 = today.getDate().toString().padStart(2, '0'); // 日补零

				// 创建一个新的 Date 对象，加1天
				var nextDay = new Date(today);
				nextDay.setDate(nextDay.getDate() + 1);

				// 获取加1天后的年、月、日
				var year3 = nextDay.getFullYear();
				var month3 = (nextDay.getMonth() + 1).toString().padStart(2, '0');
				var day3 = nextDay.getDate().toString().padStart(2, '0');

				// 将年月日拼接成字符串
				this.start = year2 + '-' + month2 + '-' + day2;
				this.end = year3 + '-' + month3 + '-' + day3;
				let time = new Date(); // date为合法时间，也可为空；
				let year = time.getFullYear();
				let month = time.getMonth() + 1; // js中月份从0开始
				this.day = new Date(year, month, 0).getDate(); // 返回当月最后一天既当月共多少
				// 输出结果
				console.log(this.start); // 当前日期
				console.log(this.end); // 加1天后的日期


				this.rider_statistics()
			},
			getIndex(e) {
				console.log(e);
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14",
							"15", "9", "10", "11", "12"
						],
						series: [{
								legendShape: 'circle',
								name: "成交量A",
								data: [35, 8, 25, 37, 4, 20, 70, 40, 65, 100, 44, 68, 70, 40, 65, 100, 44,
									68, 8
								]
							},
							{
								legendShape: 'circle',
								name: "成交量B",
								data: [70, 40, 65, 100, 44, 68, 35, 8, 25, 37, 4, 20, 70, 95, 150, 112, 1,
									70, 95
								]
							},
							{
								legendShape: 'circle',
								name: "成交量C",
								data: [100, 80, 95, 150, 112, 132, 70, 40, 65, 100, 44, 68, 7, 68, 35, 8,
									25, 37
								]
							}
						]
					};
					// this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.content {
		position: absolute;
		top: 200rpx;
		left: 40rpx;
		padding-bottom: 115rpx;

		.tablist {
			width: 280rpx;
		}

		.table_o {
			width: 675rpx;
			height: auto;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-top: 24rpx;
			padding: 32rpx 24rpx;

			.o_tj {
				.tj_one {
					font-weight: bold;
					font-size: 28rpx;
					color: #00091A;
				}

				.tj_t {
					margin-left: 8rpx;
					font-size: 24rpx;
					color: #CCCED1;
				}
			}

			.t_tj {
				margin-top: 24rpx;
				width: 630rpx;
				height: 168rpx;
				background: #F7FAFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.ttj_o {
					margin-left: 24rpx;

					.shouyi {
						margin: 10rpx 0;
						font-size: 24rpx;
						color: #999CA3;
					}

					.money {
						margin: 10rpx 0;
						font-weight: bold;
						font-size: 40rpx;
						color: #00091A;
					}
				}
			}

			.bag_money {
				margin-top: 32rpx;

				.a {
					width: 210rpx;
					margin-top: 20rpx;

					.o_e {
						margin: 10rpx 0;
						font-weight: bold;
						font-size: 32rpx;
						color: #00091A;
					}

					.o_w {
						margin: 10rpx 0;
						font-size: 24rpx;
						color: #999CA3;
					}
				}
			}
		}
	}
</style>